<template>
  <div>
    <div>
      <Heder :isLeft="true" title="搜索" />
    </div>
    <div class="search_wrap">
      <div class="search">
        <i class="fa fa-search"></i>
        <input v-model="search_val" type="text" placeholder="输入店名">
      </div>
      <button class="canle-btn" @click="search()">搜索</button>
    </div>
    <!-- 列表 -->
    <div v-if="isListShow" class="result">
      <div class="business" v-for="(item,index) in result.restaurants" :key="index" @click="handleDetail(item)">
        <img :src="item.image_path">
        <div class="name">
          {{item.name}}
        </div>
        <div class="rating">评分{{item.rating}}</div>
      </div>

      <div @click="handleDetail(item)" v-for="(item) in result.words" :key="item.id" class="good-list"><i class="iconfont icon-sousuo"></i> {{item}}</div>
    </div>

    <div v-if="!isListShow">
      <!-- 排序 -->
      <div class="filter-view" :class="{'isFiterTop':isTop}">
        <FilterView :isfilterMask="isfilterMask" :filterVisible="filterVisible" :filterData="filterData" @fleterClick="fleterClick" @handleClick="handleClick" @handleCanle="handleCanle" @empty="empty" @update="update" />
      </div>
      <!-- 商家 -->
      <div class="goods">
        <mt-loadmore :top-method="loadData" :bottom-method="loadMore" :bottom-all-loaded="allLoaded" :auto-fill="false" :bottomPullText="bottomPullText" ref="loadmore">
          <IndexShow v-for="(item,index) in restaurants" :key="index" :restaurant="item.restaurant" />
        </mt-loadmore>
      </div>
    </div>
    <!-- 空图标 -->
    <div v-if="isShowEmpty">
      <img src="https://fuss10.elemecdn.com/d/60/70008646170d1f654e926a2aaa3afpng.png" alt>
    </div>
  </div>
</template>
<script>
import Heder from "../components/Myheder.vue";
import IndexShow from "../components/IndexShow.vue";
import FilterView from '../components/FilterView.vue';
export default {
  name: 'index',
  data () {
    return {
      search_val: '',
      result: null,
      isShowEmpty: false,
      isListShow: false,
      filterData: {},
      isfilterMask: false,
      filterVisible: false,
      isTop: false,
      size: 9,
      page: 1,
      restaurants: [],
      allLoaded: false,
      bottomPullText: '上拉加载更多',
      data: null
    }

  },
  created () {
    this.getGoods()

  },
  watch: {
    search_val () {
      this.kerWordChange()
    }
  },
  computed: {

  },
  methods: {
    getGoods () {
      this.loadData()
      this.$axios("/api/profile/filter").then(res => {
        this.filterData = res.data;
        let navTab = this.filterData.navTab
        for (let i = 0; i < navTab.length; i++) {
          navTab[0].icon = 'iconfont icon-xia'
          navTab[3].icon = 'iconfont icon-saixuan'
        }
        this.filterData.navTab = navTab
        this.filterData.sortBy[0].check = true
        console.log('filterData', this.filterData);
      });
    },


    loadData () {
      this.page = 1;
      this.allLoaded = false;
      this.bottomPullText = "上拉加载更多";
      // 拉取商家信息
      this.$axios
        .post(`/api/profile/restaurants/${this.page}/${this.size}`, this.data)
        .then(res => {
          // console.log(res.data);
          this.$refs.loadmore.onTopLoaded();
          this.restaurants = res.data;
        });
    },
    loadMore () {
      if (!this.allLoaded) {
        this.page++;
        // 拉取商家信息
        this.$axios
          .post(`/api/profile/restaurants/${this.page}/${this.size}`)
          .then(res => {
            //  加载完之后重新渲染
            this.$refs.loadmore.onBottomLoaded();
            if (res.data.length > 0) {
              res.data.forEach(item => {
                this.restaurants.push(item);
              });
              if (res.data.length < this.size) {
                this.allLoaded = true;
                this.bottomPullText = "没有更多了哦";
              }
            } else {
              // 数据为空
              this.allLoaded = true;
              this.bottomPullText = "没有更多了哦";
            }
          });
      }
    },
    // 点击tab分类
    handleClick (e) {
      this.isTop = true
      if (e == 0) {
        this.filterVisible = !this.filterVisible
        this.isfilterMask = false
      } else if (e == 3) {
        this.isfilterMask = !this.isfilterMask
        this.filterVisible = false
      } else {
        this.filterVisible = false
        this.isfilterMask = false
      }

    },
    /* 点击list */
    fleterClick (item, e) {
      this.filterData.sortBy.forEach((item, index) => {
        if (e == index) {
          this.filterData.navTab[0].name = item.name
          item.check = true
          this.filterVisible = false
        } else {
          item.check = false
        }
      });

    },
    /* update */
    update (item) {
      let rqeobj = { condition: '' }
      if (item.code) {
        rqeobj.condition = item.code
      } else {
        rqeobj.condition = item
      }
      console.log('rqeobj', rqeobj);
      this.data = rqeobj
      this.loadData()
    },
    /* 点击蒙版 */
    handleCanle (e) {
      this.isTop = e
      this.isfilterMask = false
      this.filterVisible = false
    },

    /* 点击清空 */
    empty () {
      console.log(this.filterData.screenBy);
      this.filterData.screenBy.forEach(item => {
        item.data.forEach(val => {
          val.select = false
        })
      })

    },

    kerWordChange () {
      if (!this.search_val) return
      this.$axios(`/api/profile/typeahead/${this.search_val}`).then(res => {
        console.log(res);
        this.result = res.data
        const restaurants = res.data.restaurants.length
        const words = res.data.words.length
        if (restaurants == 0 && words == 0) {
          this.loadData()
        } else {
          this.isListShow = true
        }
      }).catch(err => {
        this.result = null
      })
    },
    search () {
      if (this.result == null) return
      this.kerWordChange()
      console.log(this.result.restaurants)
      if (this.result.restaurants.length == 0 && this.result.words.length == 0) {
        this.isShowEmpty = true
      } else {
        this.isShowEmpty = false
      }
    },
    handleDetail (item) {
      console.log(item);
      if (typeof (item) != 'string') {
        return this.$router.push({ path: '/shop', query: item })
      }
      this.loadData()
      this.isListShow = false
    }
  },
  components: {
    Heder,
    IndexShow,
    FilterView,
  }
}
</script>
<style  scoped>
.result {
  overflow: auto;
  padding: 0.5rem;
  background-color: #fff;
  color: #525252;
  font-size: 0.38rem;
}
.search_wrap {
  height: 60px;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
}
.search {
  background-color: #eee;
  border-radius: 10px;
  line-height: 40px;
  width: 85%;
  box-sizing: border-box;
  padding: 0 16px;
}
.search input {
  background: #eee;
  outline: none;
  border: none;
  margin-left: 5px;
}
.search_wrap button {
  outline: none;
  color: #009eef;
}

.location {
  margin-top: 10px;
  background: #fff;
  padding: 8px 16px;
  height: 65px;
  box-sizing: border-box;
}

.search_list {
  background: #fff;
  padding: 5px 16px;
}
.search_list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.canle-btn {
  background-color: #fff;
  margin-right: 7px;
}
.business {
  display: flex;
  align-items: center;
  padding: 0.3rem 0;
}
.business img {
  vertical-align: middle;
  width: 0.8rem;
}

.rating {
  margin-left: auto;
  color: #ccc;
  font-size: 0.15rem;
  margin-right: 0rem;
}
.name {
  height: 0.8rem;
  line-height: 0.8rem;
  margin-left: 0.2rem;
}
.good-list {
  height: 0.5rem;
  line-height: 0.5rem;
  padding: 0.3rem 0;
}
.goods {
  height: 76.4vh;
  overflow: auto;
}
</style>
